<template>
    <div class="talk_div">
        <div class="talk bordered" v-for="(talk, index) in talks.list" :key="index">
            <el-text>{{ talk.createTime }}</el-text>
            <div class="talk_content">
                {{ talk.content }}
            </div>
            <div class="talk_image">
                <el-image class="talk_img" fit="cover" :preview-src-list="talk.images" :initial-index="index"
                    v-for="(item, index) in talk.images" :src="item" :key="index" />
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
// import { getAll } from '@/api/db';
// import { ElNotification } from 'element-plus';

const talks: { list: Array<any> } = reactive({ list: [] })

// getAll("talk").then((ret:any)=>{
//     if(!ret.status) ElNotification({type:"error",message:ret.data})
//     talks.list = ret.data
// })
talks.list = [
    {
        content: "测试说说内容", images: [
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8b7ecd2e-e68d-4b69-9f8a-655727bc19ca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690694782&t=9dfa21aff4101986deb7a0c60e7cfec5",
            "https://p6.itc.cn/images01/20210103/aa0d8b1f105d478b955adadd5e5fa403.jpeg",
            "https://img0.baidu.com/it/u=1444745601,28898061&fm=253&fmt=auto&app=120&f=JPEG?w=1000&h=800",
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d70a252-3f0b-4bd4-a11b-88305109991d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690694810&t=485a11224eb9d784089f5f6bf773733e"
        ],
        createTime: "2022-10-2 05:15:30"
    },
    {
        content: "测试说说内容", images: [
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8b7ecd2e-e68d-4b69-9f8a-655727bc19ca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690694782&t=9dfa21aff4101986deb7a0c60e7cfec5",
            "https://p6.itc.cn/images01/20210103/aa0d8b1f105d478b955adadd5e5fa403.jpeg",
            "https://img0.baidu.com/it/u=1444745601,28898061&fm=253&fmt=auto&app=120&f=JPEG?w=1000&h=800",
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d70a252-3f0b-4bd4-a11b-88305109991d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690694810&t=485a11224eb9d784089f5f6bf773733e"
        ],
        createTime: "2022-10-2 05:15:30"
    },
    {
        content: "测试说说内容", images: [
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8b7ecd2e-e68d-4b69-9f8a-655727bc19ca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690694782&t=9dfa21aff4101986deb7a0c60e7cfec5",
            "https://p6.itc.cn/images01/20210103/aa0d8b1f105d478b955adadd5e5fa403.jpeg",
            "https://img0.baidu.com/it/u=1444745601,28898061&fm=253&fmt=auto&app=120&f=JPEG?w=1000&h=800",
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d70a252-3f0b-4bd4-a11b-88305109991d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690694810&t=485a11224eb9d784089f5f6bf773733e"
        ],
        createTime: "2022-10-2 05:15:30"
    },
    {
        content: "测试说说内容", images: [
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8b7ecd2e-e68d-4b69-9f8a-655727bc19ca%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690694782&t=9dfa21aff4101986deb7a0c60e7cfec5",
            "https://p6.itc.cn/images01/20210103/aa0d8b1f105d478b955adadd5e5fa403.jpeg",
            "https://img0.baidu.com/it/u=1444745601,28898061&fm=253&fmt=auto&app=120&f=JPEG?w=1000&h=800",
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F8d70a252-3f0b-4bd4-a11b-88305109991d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690694810&t=485a11224eb9d784089f5f6bf773733e"
        ],
        createTime: "2022-10-2 05:15:30"
    },
]
</script>
<style lang="less" scoped>
@import url(@/style/common.less);

.talk_div {
    width: 70%;
}

.talk {
    overflow: hidden;
    padding: 1rem;
}

.talk_content {
    margin: 1rem 0.5rem;
}

.talk_image {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.talk_img {
    border-radius: 0.5rem;
    margin: 0.5rem;
    width: 7rem;
    height: 7rem;
}
</style>